<template>
	<div>
		<div class="ljdl">
			<img src="../../my-img/people.jpg" class="peo"/>
			<div class="dl"><div v-if="showState">{{username}}</div><div v-if="!showState" v-on:click="change">登录</div></div>
			<div class="dl-s">登录后同步您的收藏</div>
			<img src="../../my-img/qiandao.jpg" class="qd"/>
		</div>
		<div class="ht"></div>
		<div class="mi">
			<div class="zuo1">
				<img src="../../my-img/hert.jpg" class="tubiao"/>
				<div>我的收藏</div>
				<div>0</div>
			</div>.
			<div class="you1">
				<img src="../../my-img/down.jpg" class="tubiao"/>
				<div>下载</div>
				<div>0</div>
			</div>
			<div class="heng"></div>
			<div class="zuo2">
				<img src="../../my-img/zhubo.jpg" class="tubiao"/>
				<div>我的主播</div>
				<div>登录后可同步</div>
			</div>
			<div class="you2">
				<img src="../../my-img/lishi.jpg" class="tubiao"/>
				<div>收听历史</div>
				<div>带你聆听</div>
			</div>
		</div>
		<div class="ht"></div>
		<div class="m-yve">
			<img src="../../my-img/yve.jpg"/>
			<div>我的余额</div>
			<img src="../../my-img/m-jiantou.jpg" />
		</div>
		<div class="m-yigou">
			<img src="../../my-img/qian.jpg"/>
			<div>已购项目</div>
			<div>登录后可同步</div>
			<img src="../../my-img/m-jiantou.jpg" />
		</div>
		<div class="m-youhui">
			<img src="../../my-img/shoucang.jpg"/>
			<div>我的优惠券</div>
			<div>登录后可同步</div>
			<img src="../../my-img/m-jiantou.jpg" />
		</div>
		<div class="ht"></div>
		<div class="m-baoyou">
			<img src="../../my-img/baoyou.jpg"/>
			<div>9块9包邮</div>
			<div>9块9包邮</div>
			<img src="../../my-img/m-jiantou.jpg" />
		</div>
		<div class="ht"></div>
		<div class="m-baoyou">
			<img src="../../my-img/game.jpg"/>
			<div>游戏中心</div>
			<div>人本艰，一场游戏一场梦</div>
			<img src="../../my-img/m-jiantou.jpg" />
		</div>
		<div class="ht"></div>
		<div class="m-baoyou">
			<img src="../../my-img/AD.jpg"/>
			<div>低价买好车!</div>
			<div>10万价格,感受60万的优越...</div>
			<img src="../../my-img/m-jiantou.jpg" />
		</div>
		<div class="ht"></div>
		<div class="m-liuliang">
			<img src="../../my-img/G.jpg"/>
			<div>免流量畅听</div>
			<div>无限畅听,流量全免</div>
			<img src="../../my-img/m-jiantou.jpg" />
		</div>
		<div class="m-liuliang1">
			<img src="../../my-img/G.jpg" class="ll"/>
			<div class="liu">
				<div class="ping">平安流量-超值免流畅听</div>
				<div class="wu">无流量订购记录</div>
			</div>
			<img src="../../my-img/anniu.jpg" class="m-img"/>
		</div>
		<div class="m-huiyuan">
			<img src="../../my-img/huiyuan.jpg"/>
			<div>我的会员</div>
			<img src="../../my-img/m-liuliang.jpg" class="huiyuan"/>
			<img src="../../my-img/m-jiantou.jpg" />
		</div>
		<div class="ht"></div>
		<div class="m-yve">
			<img src="../../my-img/dingshi.jpg"/>
			<div>定时关闭</div>
			<img src="../../my-img/m-jiantou.jpg" />
		</div>
		<div class="m-yve">
			<img src="../../my-img/naozhong.jpg"/>
			<div>闹钟</div>
			<img src="../../my-img/m-jiantou.jpg" />
		</div>
		<div class="m-yvyue">
			<img src="../../my-img/yvyue.jpg"/>
			<div>预约</div>
			<img src="../../my-img/m-jiantou.jpg" />
		</div>
		<div class="ht"></div>
		<div class="m-yvyue">
			<img src="../../my-img/shezhi.jpg"/>
			<div>更多设置</div>
			<img src="../../my-img/m-jiantou.jpg" />
		</div>
		<div class="ht"></div>
	</div>
</template>
<script>
	
	export default {
		methods: {
			change(){
				this.$store.commit('changeState');
			}
			
		},
		computed:{
			showState(){
				// 获取仓库当中的状态值
				return this.$store.state.yhmState;
			},
			username(){
				return this.$store.state.userinfo;
			}
		}
	}
</script>

<style>
	.m-yvyue{
		width: 100%;
		height: 1.652173rem;
		/*background-color: red;*/
		display: flex;
		align-items: center;
	}
	.m-yvyue :nth-child(1){
		width: 0.673913rem;
		height: 0.643478rem;
		margin-left: 0.565217rem;
	}
	.m-yvyue :nth-child(2){
		display: inline-block;
		font-size: 0.413043rem;
		margin-left: 0.521739rem;
		flex-grow: 1;
	}
	.m-yvyue :nth-child(3){
		width: 0.497826rem;
		height: 0.734782rem;
		margin-right: 0.517391rem;
	}
	.m-huiyuan{
		width: 100%;
		height: 1.652173rem;
		/*background-color: red;*/
		display: flex;
		align-items: center;
	}
	.m-huiyuan :nth-child(1){
		width: 0.673913rem;
		height: 0.643478rem;
		margin-left: 0.565217rem;
	}
	.m-huiyuan :nth-child(2){
		display: inline-block;
		font-size: 0.413043rem;
		margin-left: 0.521739rem;
		flex-grow: 1;
	}
	.m-huiyuan :nth-child(3){
		font-size: 0.369565rem;
		margin-right: 0.195652rem;
		width: 1.369565rem;
		height: 0.565217rem;
	}
	.m-huiyuan :nth-child(4){
		width: 0.497826rem;
		height: 0.734782rem;
		margin-right: 0.517391rem;
	}
	.m-liuliang1{
		width: 100%;
		height: 1.847826rem;
		/*background-color: red;*/
		display: flex;
		align-items: center;
		border-bottom: solid 0.043478rem #f9f9f9;
	}
	.ll{
		width: 0.673913rem;
		height: 0.643478rem;
		margin-left: 0.565217rem;
	}
	.liu{
		display: inline-block;
		font-size: 0.413043rem;
		margin-left: 0.521739rem;
		flex-grow: 1;
	}
	.wu{
		font-size: 0.304347rem;
		margin-top: 0.158695rem;
	}
	.m-img{
		width: 1.456521rem;
		height: 0.934782rem;
		margin-right: 0.517391rem;
	}
	.m-liuliang{
		width: 100%;
		height: 1.652173rem;
		/*background-color: red;*/
		display: flex;
		align-items: center;
		border-bottom: solid 0.043478rem #f9f9f9;
	}
	.m-liuliang :nth-child(1){
		width: 0.673913rem;
		height: 0.643478rem;
		margin-left: 0.565217rem;
	}
	.m-liuliang :nth-child(2){
		display: inline-block;
		font-size: 0.413043rem;
		margin-left: 0.521739rem;
		flex-grow: 1;
	}
	.m-liuliang :nth-child(3){
		font-size: 0.369565rem;
		margin-right: 0.195652rem;
	}
	.m-liuliang :nth-child(4){
		width: 0.497826rem;
		height: 0.734782rem;
		margin-right: 0.517391rem;
	}
	.m-baoyou{
		width: 100%;
		height: 1.652173rem;
		/*background-color: red;*/
		display: flex;
		align-items: center;
	}
	.m-baoyou :nth-child(1){
		width: 0.673913rem;
		height: 0.643478rem;
		margin-left: 0.565217rem;
	}
	.m-baoyou :nth-child(2){
		display: inline-block;
		font-size: 0.413043rem;
		margin-left: 0.521739rem;
		flex-grow: 1;
	}
	.m-baoyou :nth-child(3){
		font-size: 0.369565rem;
		margin-right: 0.195652rem;
	}
	.m-baoyou :nth-child(4){
		width: 0.497826rem;
		height: 0.734782rem;
		margin-right: 0.517391rem;
	}
	.m-youhui{
		width: 100%;
		height: 1.652173rem;
		/*background-color: red;*/
		display: flex;
		align-items: center;
	}
	.m-youhui :nth-child(1){
		width: 0.673913rem;
		height: 0.643478rem;
		margin-left: 0.565217rem;
	}
	.m-youhui :nth-child(2){
		display: inline-block;
		font-size: 0.413043rem;
		margin-left: 0.521739rem;
		flex-grow: 1;
	}
	.m-youhui :nth-child(3){
		font-size: 0.369565rem;
		margin-right: 0.195652rem;
	}
	.m-youhui :nth-child(4){
		width: 0.497826rem;
		height: 0.734782rem;
		margin-right: 0.517391rem;
	}
	.m-yigou{
		width: 100%;
		height: 1.652173rem;
		/*background-color: red;*/
		display: flex;
		align-items: center;
		border-bottom: solid 0.043478rem #f9f9f9;
	}
	.m-yigou :nth-child(1){
		width: 0.673913rem;
		height: 0.643478rem;
		margin-left: 0.565217rem;
	}
	.m-yigou :nth-child(2){
		display: inline-block;
		font-size: 0.413043rem;
		margin-left: 0.521739rem;
		flex-grow: 1;
	}
	.m-yigou :nth-child(3){
		font-size: 0.369565rem;
		margin-right: 0.195652rem;
	}
	.m-yigou :nth-child(4){
		width: 0.497826rem;
		height: 0.734782rem;
		margin-right: 0.517391rem;
	}
	.ljdl{
		width: 100%;
		height: 2.847826rem;
		/*background-color: red;*/
	}
	.peo{
		width: 1.152173rem;
		height: 1.152173rem;
		position: absolute;
		top: 0.865217rem;
		left: 0.821739rem;
	}
	.dl{
		height: 0.891304rem;
		width: 2.391304rem;
		border: solid 1px gray;
		position: absolute;
		top: 0.751304rem;
		left: 2.3rem;
		font-size: 0.456521rem;
		color: black;
		text-align: center;
		line-height:0.891304rem ;
		border-radius: 0.130434rem;
	}
	.dl-s{
		font-size: 0.391304rem;
		position: absolute;
		top: 1.821739rem;
		left: 2.3rem;
	}
	.qd{
		width: 1.83913rem;
		height: 1.83913rem;
		position: absolute;
		top: 0.551304rem;
		right: 0.391304rem;
	}
	.ht{
		width: 100%;
		height: 0.173913rem;
		background-color: #f5f5f5;
	}
	.mi{
		width: 100%;
		height: 3.913043rem;
		/*background-color: yellow;*/
	}
	.heng{
		width: 100%;
		height: 0.065217rem;
		background-color: #f9f9f9;
		position: absolute;
		top: 4.997391rem;
	}
	.zuo1{
		width: 49.4%;
		height: 1.934782rem;
		border-right: solid 0.043478rem #f9f9f9;
		/*border-bottom: solid 2px gray;*/
		float: left;
	}
	.zuo1 :nth-child(2){
		position: absolute;
		top: 3.443478rem;
		left: 2.052173rem;
		font-size: 0.413043rem;
	}
	.zuo1 :nth-child(3){
		position: absolute;
		top: 4.143478rem;
		left: 2.052173rem;
		font-size: 0.304347rem;
	}
	.tubiao{
		width: 0.97826rem;
		height: 0.891304rem;
		margin-top: 0.543478rem;
		margin-left:0.669565rem ;
	}
	.you1{
		width: 50%;
		height: 1.934782rem;
		float: left;
		/*border-bottom: solid 2px gray;*/
	}
	.you1 :nth-child(2){
		position: absolute;
		top: 3.443478rem;
		left: 7.052173rem;
		display: inline-block;
		font-size: 0.413043rem;
	}
	.you1 :nth-child(3){
		position: absolute;
		top: 4.143478rem;
		left: 7.052173rem;
		display: inline-block;
		font-size: 0.304347rem;
	}
	.zuo2{
		width: 49.4%;
		height: 2.004782rem;
		border-right: solid 0.043478rem #f9f9f9;
		float: left;
	}
	.zuo2 :nth-child(2){
		position: absolute;
		top: 5.443478rem;
		left: 2.052173rem;
		font-size: 0.413043rem;
	}
	.zuo2 :nth-child(3){
		position: absolute;
		top: 6.143478rem;
		left: 2.052173rem;
		font-size: 0.304347rem;
	}
	.you2{
		width: 50%;
		height: 1.934782rem;
		float: left;
	}
	.you2 :nth-child(2){
		position: absolute;
		top: 5.443478rem;
		left: 7.052173rem;
		font-size: 0.413043rem;
	}
	.you2 :nth-child(3){
		position: absolute;
		top: 6.143478rem;
		left: 7.052173rem;
		font-size: 0.304347rem;
	}
	.m-yve{
		width: 100%;
		height: 1.652173rem;
		/*background-color: red;*/
		display: flex;
		align-items: center;
		border-bottom: solid 0.043478rem #f9f9f9;
	}
	.m-yve :nth-child(1){
		width: 0.673913rem;
		height: 0.643478rem;
		margin-left: 0.565217rem;
	}
	.m-yve :nth-child(2){
		display: inline-block;
		font-size: 0.413043rem;
		margin-left: 0.521739rem;
		flex-grow: 1;
	}
	.m-yve :nth-child(3){
		width: 0.497826rem;
		height: 0.734782rem;
		margin-right: 0.517391rem;
	}
</style>
